<template>
  <Swiper
    v-if="reload"
    :autoHeight="autoHeight"
    :modules="modules"
    :loop="loop"
    :grid="{ rows: rows}"
    :slides-per-view="slidesPerView"
    :space-between="spaceBetween"
    :autoplay="{ delay: playTime * 1000, disableOnInteraction: false }"
    :navigation="navigation"
    :direction="horizontal ? 'horizontal' : 'vertical'"
    :pagination="{ clickable: true }"
    :scrollbar="{ draggable: false }"
    @slideChange="onSlideChange"
  >
    <swiper-slide v-for="item in list" :key="item.src" class="swiper-slide-nav" :class="{'swiper-lottery-list': type === 'lotterylist'}">
      <div v-if="type === 'banner'" class="banner-image-box" :class="{'banner-image-box-h5': piniaSystem.getIsH5}" @click="openActive(item)">
        <img v-zlazy="item.src || ''" style="display: block" alt="" />
      </div>
      <div v-else-if="type === 'activity'" class="activity-info-box" @click="openActive(item)">
        <div class="activity-info-pc" v-if="!piniaSystem.getIsH5">
          <div class="activity-info ">
            <h3 class="activity-info-title">{{ item.title }}</h3>
            <p class="activity-info-content">{{ item.desc }}</p>
            <button class="activity-info-button">{{item.detail}}</button>
          </div>
          <div class="activity-image"><img v-zlazy="item.resource || item.src || ''" style="display: block" alt="" /></div>
        </div>
        <div class="activity-info-h5" v-if="piniaSystem.getIsH5">
          <img v-zlazy="item.resource || item.src || ''" style="display: block" alt="" />
          <h3 class="activity-info-title">{{ item.title }}</h3>
        </div>
      </div>
      <div v-else-if="type === 'gameCategory'" class="game-category-box" @click="openActive(item)">
        <div class="game-category-pc" v-if="!piniaSystem.getIsH5">
          <img v-zlazy="item.resource || item.src || ''" style="display: block" alt="" />
          <h3 class="game-category-title">{{item.name}}</h3>
        </div>
        <div class="game-category-h5" v-if="piniaSystem.getIsH5">
          <img v-zlazy="item.resource || item.src || ''" style="display: block" alt="" />
          <h3 class="game-category-title">{{item.name}}</h3>
        </div>
      </div>
      <div v-else-if="type === 'recommend'" class="game-recommend" @click="openActive(item)">
        <div class="game-recommend-pc" v-if="!piniaSystem.getIsH5">
          <img v-zlazy="item.imgPlay || item.src || ''" style="display: block" alt="" />
          <h3 class="game-recommend-title">{{item.gameName}}</h3>
        </div>
        <div class="game-recommend-h5" v-if="piniaSystem.getIsH5">
          <img v-zlazy="item.imgPlay || item.src || ''" style="display: block" alt="" />
          <h3 class="game-recommend-title">{{item.gameName}}</h3>
        </div>
      </div>
      <div v-else-if="type === 'lotterylist'" class="swiper-lottery" @click="openActive(item)">
        <h3>{{ parseTime(item.createTime, '{m}/{d} {h}:{i}') }}</h3>
        <h3>{{ handleHideName(item.memberName) }}</h3>
        <span v-if="item.itemType == 4">
          {{t("lotteryRecord.text38")}}
        </span>
        <span v-if="item.itemType == 2">
          <img :src="getWalletIcon(item.giftType)" alt="">
          <em> {{ Number(item.giftContent).toFixed(2) }}</em>
        </span>
      </div>
    </swiper-slide>
    <div class="swiper-scrollbar"></div>
  </Swiper>
</template>

<script setup lang="ts" name="ZSwiper">
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Grid } from 'swiper';
import system from '@/store/system';
import { handleHideName, parseTime } from '@/utils/format';
// 引入swiper样式（按需导入）
// import 'swiper/css/pagination' // 轮播图底面的小圆点
// import 'swiper/css/navigation' // 轮播图两边的左右箭头
// import 'swiper/css/scrollbar'  // 轮播图的滚动条
import 'swiper/css/grid'; // 轮播图分行
import userinfo from '@/store/userinfo';
// 引入swiper核心和所需模块

const piniaSystem = system();
const piniaUserinfo = userinfo();
const { t } = useI18n();
const emits = defineEmits(['slide-click']);

const props = defineProps({
  // 标题
  spaceBetween: {
    type: Number,
    default: 50,
  },
  slidesPerView: {
    type: Number,
    default: 1,
  },
  height: {
    type: Number,
    default: 0,
  },
  list: {
    type: <any> Array,
    default: []
  },
  playTime: {
    type: Number,
    default: 1000,
  },
  type: {
    type: String,
    default: 'banner'
  },
  horizontal: {
    type: Boolean,
    default: true
  },
  rows: {
    type: Number,
    default: 1,
  },
  loop: {
    type: Boolean,
    default: true
  },
  skeletonNumber: {
    type: Number,
    default: 1
  },
  autoHeight: {
    type: Boolean,
    default: false
  }
});

const getWalletIcon = (id: string) => {
  const wallet = piniaUserinfo.getWallet.find((im:any) => im.currencyId == id);
  return wallet.currencyIcon;
}

// 监听管理
watch(
  () => props.list,
  (val, preVal) => {
    nextTick(()=>{
      reload.value = false;
      if(val.length === 0){
        let defaultList = [];
        for (let index = 0; index < props.skeletonNumber; index++) {
          defaultList.push({
            resource: new URL(`../../../assets/images/lazyloading.svg`, import.meta.url).href,
            title: `loading`,
            desc: `loading`,
            detail: `loading`,
            active: 'loading',
            gameName: 'loading',
            name: 'loading'
          })
        }
        list.value = [...defaultList];
      }else{
        list.value = val;
      }
      nextTick(()=>{
        reload.value = true;
      });
    });
  },
  { immediate: true, deep: true },
);

const data:any = reactive({
  reload: true,
  list: props.list,
  modules: [Grid, Autoplay], // 在modules加入要使用的模块
});

const {
  reload,
  list,
  modules
} = toRefs(data);

const navigation = ref({
  nextEl: ".swiper-button-next",
  prevEl: ".swiper-button-prev",
});


const prevEl = (item:any, index:any) => {
  // console.log('上一张' + index + item)
};
const nextEl = () => {
  // console.log('下一张')
};
// 更改当前活动swiper
const onSlideChange = (swiper:any) => {
  // swiper是当前轮播的对象，里面可以获取到当前swiper的所有信息，当前索引是activeIndex
  // console.log(swiper.activeIndex)
}

// 活动banner
const openActive = (item:any) => {
  emits("slide-click", item);
}

defineExpose({
});
</script>

<style lang="scss" scoped>
.banner-image-box{
  img{
    width: 100%;
    max-height: var(--rem-360);
  }
  &.banner-image-box-h5{
    img{
      max-height: var(--rem-175);
    }
  }
}
.activity-info-box{
  .activity-info-pc{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--rem-10) var(--rem-20) var(--rem-10) var(--rem-20);
    background-color: var(--z-bg-card);
    border-radius: var(--rem-20);
    .activity-info{
      width: calc(100% - 160rem);
      h3.activity-info-title{
        font-size: var(--rem-22);
        font-weight: bold;
        color: var(--z-font-anti);
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
        margin-bottom: var(--rem-12);
      }
      .activity-info-content{
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: var(--rem-40);
        /*! autoprefixer: off */
        -webkit-box-orient: vertical;
      }
      .activity-info-button{
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1.5px solid var(--z-font-def);
        border-radius: 30rem;
        padding: 5rem 30rem;
        margin-top: 20rem;
        font-weight: bold;
      }
    }
    .activity-image{
      width: 150rem;
      height: 150rem;
      border-radius: 150rem;
      background: var(--z-bg-def);
      display: flex;
      justify-content: center;
      align-items: center;
      img{
        display: block;
      }
    }
  }
  .activity-info-h5{
    background-color: var(--z-bg-card);
    border-radius: var(--rem-20);
    padding: 20rem 0;
    h3.activity-info-title{
      font-size: var(--rem-12);
      font-weight: bold;
      text-align: center;
      color: var(--z-font-anti);
      margin-top: var(--rem-12);
      box-sizing: border-box;
    }
    img{
      width: var(--rem-89);
      height: var(--rem-90);
      margin: 0 auto;
      display: block;
    }
  }
}
.swiper-slide-nav{
  cursor: pointer;
  &.swiper-lottery-list{
    .swiper-lottery{
      text-align: center;
      display: flex;
      h3{
        width: 33%;
      }
      span{
        width: 35%;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding-left: var(--rem-20);
        line-height: 1;
        em{
          font-style: normal;
          white-space: nowrap;
        }
        img{
          width: var(--rem-20);
          height: var(--rem-20);
          margin-right: var(--rem-5);
        }
      }
    }
  }
}
.game-category-pc,
.game-recommend-pc{
  background-color: var(--z-bg-card);
  border-radius: var(--rem-30);
  padding: var(--rem-20);
  img{
    display: block;
    width: var(--rem-185);
    height: var(--rem-185);
    border-radius: var(--rem-20);
  }
  h3.game-category-title,
  h3.game-recommend-title{
    font-size: var(--rem-16);
    font-weight: bold;
    text-align: center;
    color: var(--z-font-anti);
    margin-top: var(--rem-12);
    box-sizing: border-box;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
}
.game-category-h5,
.game-recommend-h5{
  background-color: var(--z-bg-card);
  border-radius: var(--rem-15);
  img{
    width: 100%;
    display: block;
    border-radius: var(--rem-15);
  }
  h3.game-category-title,
  h3.game-recommend-title{
    font-size: var(--rem-12);
    font-weight: bold;
    text-align: center;
    color: var(--z-font-anti);
    line-height: var(--rem-30);
    box-sizing: border-box;
  }
}
.game-recommend{
  .game-recommend-h5{
    padding: var(--rem-10);
    margin-right: 10rem;
    margin-bottom: 10rem;
    img{
      width: var(--rem-90);
      height: var(--rem-90);
    }
    h3.game-recommend-title{
      height: 30rem;
      line-height: 30rem;
      margin-top: 10rem;
      overflow:hidden;//超出的隐藏
      text-overflow:ellipsis;//省略号
      white-space:nowrap;//强制一行显示
    }
  }
}
</style>
